<template>
  <div>
    <p>{{ title }}</p>
    <p>{{ money }}</p>
    <p>{{ money + 100 }}</p>
    <p>{{ money * 100 }}</p>
    <p>{{ obj.name }}</p>
    <p>{{ arr[1] }}</p>
    <p>{{ sum(100, 200) }}</p>
    <!-- 在插值表达式中使用的数据 必须在setup函数中进行了提供 -->
    <!-- <p>{{ intro }}</p> -->
    <!-- 支持的是表达式，而非语句，比如：if   for ... -->
    <!-- <p>{{  if (money == 99) { return 100 } }}</p> -->
    <!-- 不能在标签属性中使用 {{  }} 插值 (插值表达式只能标签中间使用) -->
    <!-- <img src="{{imgUrl}}" alt=""> -->
  </div>
</template>

<script setup lang="ts">
const title = '你好'
const money = 99
const obj = {
  name: '张三',
  age: 18
}
const arr = [100, 99]
const sum = (num1: number, num2: number) => {
  return num1 + num2
}
// const imgUrl = './assets/logo.png'
</script>